<template>
    <div id='' class='system_set_form'>
        <i-form ref="iForm" :config="config">
            <template #myslot="{row}">
                <div v-if="file.length !== 0" class="imgShow">
                    <Icon type="ios-close-circle" class="icon_close" size="15" color="#ff9900" @click="removeImg" />
                    <a>{{file[0].name}}</a>
                </div>
                <Upload v-else :show-upload-list="false" type="drag" action="" :accept="Accept" :format="Format" :before-upload="beforeUpload">
                    <div style="padding: 20px 0">
                        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                        <p>点击或拖拽文件上传,文件大小不能超过50MB</p>
                    </div>
                </Upload>
            </template>
        </i-form>
    </div>
</template>
<script>
import { config } from './form_config'
export default {
    name: '',
    props: [''],
    data() {
        this.newConfig = icu.util.deepClone(config)
        return {
            config: this.newConfig,
            formData: {},
            file: [],
            Accept: ".pdf,.docx,.xlsx",
            Format: ['.pdf', '.docx', '.xlsx']
        };
    },
    components: {},
    computed: {},
    beforeMount() { },
    mounted() {
        this.$fileApi = this.$Api.get(['common:upload'])
    },
    methods: {
        getForm(cb) {
            this.$refs.iForm.submit('fileAddUpdata', (res) => {
                this.formData = this.returnData(res);
                this.$http.$post('DocumentSave', { data: this.formData }).then(res => {
                    if (res.code == 200) {
                        this.$Message.success('保存成功');
                        if (cb) {
                            cb(this.formData)
                        }
                        return
                    }
                })
            })
        },
        setData(row) {
            this.$http.$get('DocumentDetails', { params: { id: row.id } }).then(res => {
                if (res.code == 200) {
                    if (res.data.doc) {
                        this.file.push({ name: res.data.doc.name })
                    }
                    this.$refs.iForm.setData({
                        ...this.returnData(res.data)
                    })
                    return
                }
                this.$Message.error(res.msg);
            })
        },
        returnData(res) {
            return {
                wdType: res.wdType ? res.wdType : '',
                wdName: res.wdName ? res.wdName : '',
                wdRemarks: res.wdRemarks ? res.wdRemarks : '',
                docId: this.file.length == 0 ? '' : this.file[0].id,
                id: res.id ? res.id : '',
            }
        },
        beforeUpload(response) {
            this.$Message.loading({
                content: '正在上传',
                duration: 0
            });
            // response.size 单位是 b 字节
            if (response.size > 51200 * 1024) {
                this.$Message.warning('文件  ' + response.name + ' 太大，上传文件大小不能超过50MB');
                return
            }
            this.$fileApi.fileUpload(response, (res) => {
                if (res.code == 200) {
                    this.file = res.data;
                    this.$Message.destroy()
                } else {
                    this.$Message.error(res.msg);
                }
            })
        },
        removeImg() {
            this.file = []
        }
    },
    watch: {}
}
</script>
<style lang='less' scoped>
.imgShow {
    margin-left: 10px;
    position: relative;
    width: auto;
    height: 30px;
}
.imgShow .icon_close {
    position: absolute;
    right: 0px;
    top: 10px;
}
</style>